<template>
  <!-- 图片上传 -->
  <!-- :file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
  <!-- :show-file-list 是否显示已上传文件列表 -->
  <!-- :before-upload 上传文件之前的钩子，参数为上传的文件 -->
  <!-- :http-request 自定义上传文件 -->
  <!-- :on-remove 文件列表移除文件时的钩子 -->
  <!--  class="avatar-uploader" -->

  <el-upload
    class="avatar-uploader"
    action="#"
    :show-file-list="false"
    :file-list="item.filelist"
    list-type="picture"
    :before-upload="file => beforeUpload(file, index)"
    :http-request="params => upload(params, index)"
    :on-remove="(file, fileList) => handleRemove(file, fileList, index)"
  >
    <!-- <!-- css将字和图对齐 vertical-align: middle; -->

    <img
      v-if="item.img ? true : false"
      :src="item.img"
      alt=""
      style="width: 100px; height: 60px; vertical-align: middle"
    />

    <span v-else class="avatar-uploader-txt">上传图片</span>
    <i class="el-icon-circle-close"></i>
  </el-upload>
</template>

<script>
// 导入sdk 工具包
var COS = require('cos-js-sdk-v5')
// SECRETID 和 SECRETKEY 请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
// 创建cos实例
var cos = new COS({
  SecretId: 'AKIDeEl7II3XpvsdBUqB0lPDzYLxKZcR2OXU', // 身份识别 ID
  SecretKey: 'oOmwrY2JL9nhU3ThfcbgyUp32mkSv74m' // 身份秘钥
})
export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    index: {
      type: [Number, String]
    },
    options: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      dialogVisible: false //查看图片弹出框
    }
  },
  methods: {
    // 上传图片之前触发的钩子函数
    beforeUpload (file, index) {
      // 入参 file  拿到上传的文件
      // 入参 index 拿到上传文件的下标
      // console.log(file, index)
      console.dir(file)
      console.log(this.item)

      // 判断图片类型
      const imgType = [
        'image/jpeg',
        'image/png',
        'image/gif',
        'image/bmp',
        'image/jpg'
      ]
      if (!imgType.includes(file.type)) {
        this.$message.warning(
          '上传文件类型不符,请上传jpeg/png/gif/bmp/jpg 类型的数据'
        )
      }
      // 限制上传文件大小
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
    },
    // 图片自定义上传触发的回调
    upload (params, index) {
      // file 就是我们选择的文件

      // 上传到腾讯云处理
      cos.putObject(
        {
          Bucket: 'moeyuame-1316654531', //* 填入您自己的存储桶，必须字段 */
          Region: 'ap-beijing', //* 存储桶所在地域，例如ap-beijing，必须字段 */
          Key: params.file.name, //* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
          Body: params.file, //* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
          onProgress: progressData => {
            // 文件的上传进度
            // console.log(JSON.stringify(progressData))
            this.percentage = progressData.percent * 100
          }
        },
        (err, data) => {
          // console.log(err || data)
          // 上传成功后腾讯云返回的结果
          // console.log(data)
          console.log(data.Location)
          this.options[index].img = `https:${data.Location}`
        }
      )
    },
    // 文件移除是触发的回调
    handleRemove (file, fileList, index) {
      this.options[index].img = ''
    }
  }
}
</script>

<style lang="scss" scope>
::v-deep .el-form {
  display: inline-block;
}
// 上传图片
.avatar-uploader {
  display: inline-block;
  margin-left: 5px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  width: 100px;
  height: 60px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  // overflow: hidden;//溢出隐藏
  // 控制上传图片上边的x图标
  .el-icon-circle-close {
    position: absolute;
    right: -5px;
    top: -7px;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-txt {
  color: #8c939d;
  width: 98px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  padding: 20px;
}
.avatar {
  width: 98px;
  height: 58px;
  display: block;
}
</style>
